<!-- v-model深化理解 -->
<template>
  <div id="model" class="model">
    <input type="text" :value="changeValue" @change="changeText($event)" />
    <!--$event固定写法，代表input本身 -->
    <p>修改的值为：{{changeValue}}</p>
    <input type="text" v-model.lazy.trim="modelValue" />
    <p>v-model修改的值为：{{modelValue}}</p>
    <!-- <div> -->
    <!-- <router-view></router-view> -->
    <trans></trans>

    <v-dialog :isShow="showPop"></v-dialog>
    <button @click="show" style="margin-top:10px;">my-dialog</button>
    <!-- </div> -->
  </div>
</template>

<script>
import Vue from 'vue'
import trans from "./quiTransition";
import _d from "@/plugins/dialog";
Vue.use(_d);
export default {
  name: "model",
  data() {
    return {
      changeValue: "初始值",
      modelValue: "初始值2",
      showPop: true
    };
  },
  components: {
    trans
  },
  methods: {
    changeText: function(el) {
      console.log(el);
      this.changeValue = el.target.value;
    },
    show: function() {
        console.log(this.showPop)
      this.showPop = !this.showPop;
    }
  }
};
</script>
<style scoped>
.model {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>